<template>
  <div class="good-set">
    <div class="main">
      <el-tabs v-model="activeName" @tab-change="getList">
        <el-tab-pane name="brandSet" label="品牌管理">
          <BrandSet ref="brandSet" />
        </el-tab-pane>
        <el-tab-pane name="unit" label="设备单位">
          <UnitCard ref="unitCard" />
        </el-tab-pane>
        <el-tab-pane name="type" label="设备分类">
          <TypeCard ref="typeCard" />
        </el-tab-pane>
        <!-- <el-tab-pane name="field" label="设备字段">
          <FieldCard ref="fieldCard" />
        </el-tab-pane> -->
        <el-tab-pane name="para" label="设备参数">
          <ParaCard ref="paraCard" />
        </el-tab-pane>
        <el-tab-pane name="warrantyPolicy" label="保修政策">
          <WarrantyPolicy ref="warrantPolicyInstance"></WarrantyPolicy>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script setup lang="ts">
  import UnitCard from './components/UnitCard/index.vue'
  import TypeCard from './components/TypeCard/index.vue'
  import ParaCard from './components/ParaCard/index.vue'
  import BrandSet from './components/BrandSet/index.vue'
  import WarrantyPolicy from '@/components/pages/param-set/good-set/warranty-policy/index.vue'
  import { nextTick, ref, watch } from 'vue'
  import { useRoute } from 'vue-router'
  import { useActiveTab } from '@/services/pages/param-set/commodity-set'
  import routeComponentName from '@/config/route-component-name'
  import { ElTabs, ElTabPane } from 'element-plus'

  defineOptions({
    name: routeComponentName.setting.goodSet,
  })

  const { getActiveTab } = useActiveTab()

  // 当前激活路由
  const route = useRoute()

  // 激活标签
  const activeName = ref<typeof getActiveTab.value>('brandSet')

  // 品牌管理组件实例
  const brandSet = ref<InstanceType<typeof BrandSet> | null>(null)

  // 设备单位组件实例
  const unitCard = ref<InstanceType<typeof UnitCard> | null>(null)

  // 设备分类组件实例
  const typeCard = ref<InstanceType<typeof TypeCard> | null>(null)

  // 设备字段组件实例
  const fieldCard = ref<InstanceType<typeof BrandSet> | null>(null)

  // 设备参数组件实例
  const paraCard = ref<InstanceType<typeof ParaCard> | null>(null)

  // 保修政策组件实例
  const warrantPolicyInstance = ref<InstanceType<typeof WarrantyPolicy> | null>(null)

  /**
   * 获取数据
   */
  const getList = () => {
    nextTick(() => {
      switch (activeName.value) {
        case 'brandSet':
          brandSet.value && brandSet.value.getList()
          break
        case 'unit':
          unitCard.value && unitCard.value.getList()
          break
        case 'type':
          typeCard.value && typeCard.value.getList()
          break
        case 'field':
          fieldCard.value && fieldCard.value.getList()
          break
        case 'para':
          paraCard.value && paraCard.value.getList()
          break
        case 'warrantyPolicy':
          warrantPolicyInstance.value && warrantPolicyInstance.value.getList()
          break
      }
    })
  }

  watch(
    () => route.name,
    (value) => {
      if (value === 'proSet' && activeName.value === 'para' && paraCard.value) {
        paraCard.value.getList()
      }

      if (value === 'proSet' && route.query.isUpdate) {
        getList()
      }
    },
  )

  watch(
    () => getActiveTab.value,
    (value) => {
      activeName.value = value
      getList()
    },
    { immediate: true },
  )
</script>

<style scoped lang="scss">
  .good-set {
    height: calc(100vh - 92px);
    box-sizing: border-box;
    padding: 12px;

    .main {
      height: 100%;
      box-sizing: border-box;
      padding: 0 12px 12px 12px;
      background-color: #fff;

      :deep(.el-tabs) {
        height: 100%;

        .el-tabs__header {
          padding: 0 0 12px 0;
          margin: 0;
        }

        .el-tabs__content {
          flex: 1;
          height: 0;

          .el-tab-pane {
            height: 100%;
          }
        }
      }
    }
  }
</style>
